﻿@{
    ViewData["Title"] = "Excel导入";
    Layout = "~/Views/Shared/_ManageLayout.cshtml";
}
<!-- 正文开始 -->
<form class="layui-form" id="formAdvForm" lay-filter="formAdvForm">
    <div class="layui-fluid" style="padding-bottom: 75px;">

        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-form toolbar">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <button id="file-btn-upload" class="layui-btn layui-btn-sm layui-btn-normal icon-btn" type="button">
                                <i class="layui-icon">&#xe681;</i>上传Excel
                            </button>
                            <a href="/xls/ProductTemplate.xlsx" class="layui-btn layui-btn-sm layui-btn-normal icon-btn" type="button">
                                下载Excel模板
                            </a>
                        </div>
                    </div>
                </div>
                <table id="Table" class="layui-table" lay-filter="Table"></table>
            </div>
        </div>
    </div>
    <div class="form-group-bottom text-right">
        <a class="layui-btn" lay-filter="formAdvSubmit" lay-submit>&emsp;提交&emsp;</a>
    </div>
</form>
<script type="text/html" id="barDemo">
    <a href="javascript:;" lay-event="del" class="kong-btn2">删除</a>
</script>
<script type="text/javascript">
    layui.use(['admin', 'layer', 'form', 'table', 'laydate', 'upload'], function () {
        var $ = layui.jquery;
        var admin = layui.admin;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var insTb;
        upload.render({
            elem: '#file-btn-upload',//绑定元素
            url: '/api/product/UploadExcel', //必填项
            method: 'POST',  //可选项。HTTP类型，默认post
            accept: 'file',
            before: function (obj) {
                layer.load(2);
            },
            error: function (index, upload) {
                layer.closeAll('loading');
            },
            done: function (res, index, upload) { //每个文件提交一次触发一次。详见“请求成功的回调”
                if (res.success) {
                    var Data = res.data;
                    loadTable(Data);
                } else {
                    layer.msg(res.message, { icon: 2 });
                }
                layer.closeAll('loading');
            }
        });

        //监听工具条
        table.on('tool(Table)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent == 'del') {
                layer.confirm('确认要删除吗?', { btn: ['确定', '取消'] }
                    , function (index) {
                        obj.del();
                        layer.close(index);
                    });
            }
        });

        /* 监听表单提交 */
        form.on('submit(formAdvSubmit)', function (data) {
            var Data = table.cache["Table"];
            var RequestData = [];
            $(Data).each(function (i,m) {
                RequestData.push(m);
            });
            layer.confirm('确认要提交吗?', { btn: ['确定', '取消'] }
                , function (index) {
                    layer.load(2);
                    $.ajax({
                        url: '/api/product/AddProducts',
                        type: 'post',
                        data: JSON.stringify(RequestData),
                        contentType: "application/json",
                        dataType: "json",
                        complete: function (obj) {
                            layer.closeAll('loading');
                        },
                        success: function (res) {
                            if (res.success) {
                                layer.msg(res.message, { icon: 1 });
                                setTimeout("layer.close(" + layer.index+");window.parent.location.reload()", 2000);
                            } else {
                                if (res.data != null && res.data.length > 0) {
                                    layer.msg(res.message, { icon: 7 });
                                    loadTable(res.data);
                                } else {
                                    layer.msg(res.message, { icon: 2 });
                                }
                            }
                        }
                    });
                });
        });

        function loadTable(data) {
            /* 渲染需求表格 */
            insTb = table.render({
                elem: '#Table',
                page: false,
                cellMinWidth: 100,
                limit: 9999,
                data: data,
                cols: [[
                    { field: 'proName', style: 'height:40px', align: 'center', title: '<font color="red">*</font>产品名称', width: "5%", edit: 'text' },
                    { field: 'className', align: 'center', title: '<font color="red">*</font>所在栏目', width: "5%", edit: 'text' },
                    { field: 'proNo', align: 'center', title: '产品编号', width: "5%", edit: 'text' },
                    { field: 'casNo', align: 'center', title: 'cas号', width: "5%", edit: 'text' },
                    { field: 'seoKeywords', align: 'center', title: 'SeoKeywords', width: "8%", edit: 'text' },
                    { field: 'seoDescription', align: 'center', title: 'Seo描述', width: "6%", edit: 'text' },
                    { field: 'sort', align: 'center', title: '排序(越大越靠)', width: "8%", edit: 'text' },
                    { field: 'molecularFormula', align: 'center', title: '分子式', width: "5%", edit: 'text' },
                    { field: 'molecularweight', align: 'center', title: '分子量', width: "5%", edit: 'text' },
                    { field: 'purity', align: 'center', title: '纯度', width: "4%", edit: 'text' },
                    { field: 'meltingpoint', align: 'center', title: '熔点', width: "5%", edit: 'text' },
                    { field: 'packaging', align: 'center', title: '包装', width: "6%", edit: 'text' },
                    { field: 'appearance', align: 'center', title: '外观', width: "6%", edit: 'text' },
                    { field: 'productionCapacity', align: 'center', title: '生产能力', width: "5%", edit: 'text' },
                    { field: 'productuse', align: 'center', title: '产品用途', width: "6%", edit: 'text' },
                    { field: 'deliveryTime', align: 'center', title: '交货时间', width: "5%", edit: 'text' },
                    { field: 'isShow', align: 'center', title: '是否推荐', width: "5%", edit: 'text' },
                    { field: 'right', title: '操作', align: 'center', toolbar: '#barDemo' }
                ]]
            });
        }
    });
</script>

